<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id='app'>
			弹起来:<input @keyup='getKey' /><br>
			按下去:<input @keydown.enter='login' />
			<h1 align="center">{{letter}}</h1>
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						letter: 'A'
					}
				},
				created() { //创建完成

				},
				mounted() { //挂载完成
					document.addEventListener('keydown', this.pressKey);
				},
				methods: {
					pressKey(event) {
						console.log(event)
						this.letter=event.key
					},
					login() {
						alert('登录')
					},
					getKey(event) {
						console.log(event)
						if (event.keyCode == 13) {
							alert('登录')
						}
						if (event.keyCode == 32) {
							alert('敲了空格')
						}
					}
				},
			}).mount('#app')
		</script>
	</body>
</html>
